src/app/layout/doc/doc.component.ts
| selector | app-doc |
| styleUrls | doc.component.scss |
| templateUrl | ./doc.component.html |
Properties |
Methods |
constructor(_textService: TextService, router: Router, elem: ElementRef, http: HttpClient)
|
||||||||||||||||||||
|
Defined in src/app/layout/doc/doc.component.ts:23
|
||||||||||||||||||||
|
Parameters :
|
| ngOnInit |
ngOnInit()
|
|
Defined in src/app/layout/doc/doc.component.ts:70
|
|
Returns :
void
|
| Public uploadDoc | ||||||||
uploadDoc(url: string)
|
||||||||
|
Defined in src/app/layout/doc/doc.component.ts:27
|
||||||||
|
Parameters :
Returns :
void
|
| error |
error:
|
Type : boolean
|
|
Defined in src/app/layout/doc/doc.component.ts:21
|
| fileInput |
fileInput:
|
Decorators : ViewChild
|
|
Defined in src/app/layout/doc/doc.component.ts:16
|
| fileSizeExceeded |
fileSizeExceeded:
|
Type : boolean
|
|
Defined in src/app/layout/doc/doc.component.ts:22
|
| formData |
formData:
|
|
Defined in src/app/layout/doc/doc.component.ts:23
|
| processing |
processing:
|
Type : boolean
|
|
Defined in src/app/layout/doc/doc.component.ts:19
|
| Public router |
router:
|
Type : Router
|
|
Defined in src/app/layout/doc/doc.component.ts:24
|
| text |
text:
|
Type : IText
|
|
Defined in src/app/layout/doc/doc.component.ts:18
|
| userDocFile |
userDocFile:
|
Type : File
|
|
Defined in src/app/layout/doc/doc.component.ts:20
|
import { Component, Input, NgModule, OnInit, ElementRef, ViewChild } from '@angular/core';
import { routerTransition } from '../../router.animations';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { TextService, IText } from '../../shared'
import { Router } from '@angular/router';
@Component({
selector: 'app-doc',
templateUrl: './doc.component.html',
styleUrls: ['./doc.component.scss'],
animations: [routerTransition()]
})
export class DocComponent implements OnInit {
@ViewChild('fileInput') fileInput;
text: IText;
processing: boolean;
userDocFile: File;
error: boolean;
fileSizeExceeded: boolean;
formData = new FormData();
constructor(private _textService: TextService, public router: Router, private elem: ElementRef, private http: HttpClient) { }
public uploadDoc(url: string): void {
this.processing = true;
const fileBrowser = this.fileInput.nativeElement;
if (fileBrowser.files && fileBrowser.files[0]) {
this.userDocFile = fileBrowser.files[0];
// check filesize
if (this.userDocFile.size > 5500000) {
this.fileSizeExceeded = true;
this.processing = false;
return;
}
// cast a file to formData type
this.formData.append('file', fileBrowser.files[0]);
} else {
return;
}
const DocFile: File = this.userDocFile;
console.log(this.formData);
this._textService.enhancedDoc(this.formData)
.subscribe
(res => {
this.text = res;
this._textService.resultText = this.text;
this.processing = false;
this.router.navigateByUrl(url);
},
(err: HttpErrorResponse) => {
if (err.error instanceof Error) {
console.log('Client-side Error occured');
} else {
this.error = true;
this.processing = false;
console.log('Server-side Error occured');
}
}
);
}
ngOnInit() {
window.scrollTo(0, 0);
}
}
<div [@routerTransition] class="container-fluid">
<!--Alert-->
<div class="alert alert-danger" role="alert" *ngIf='error'>
<strong>Oh snap!</strong> The file is not readable.
</div>
<div class="alert alert-warning" role="alert" *ngIf='fileSizeExceeded'>
<strong>Oh snap!</strong> The file is too big, please choose a smaller file. Maximum 5 mb.
</div>
<div class="card card-info card-inverse mb-3 col-lg-12 center-block">
<div class="card-header card-info">
<i class="fa fa-fw fa-file-text fa-2x float-right" title="Upload your doc"></i>Upload your Doc.
<i class="fa fa-spinner fa-spin" style="font-size:32px;color:white" *ngIf='processing && userDocFile'></i>
<span class="badge badge-default">MAX 5 MB</span>
</div>
<div class="card-block bg-white">
<form>
<div class="form-group">
<input type="file" id="myfile" #fileInput name="myfile" class="btn-block btn btn-info" accept="text/plain, , application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/msword,
application/vnd.oasis.opendocument.text, application/vnd.kde.kword" />
</div>
<!-- Button (Double) -->
<div class="row">
<div class="col-md-12 ">
<div class="float-right">
<button type="button" class=" btn-block btn btn-secondary" (click)="uploadDoc('/enhanced-text-result')">
<i class="fa fa-file-text" aria-hidden="true"></i> Enhanced Text</button>
<button type="button" class="btn-block btn btn-primary" (click)="uploadDoc('/text-statistics')">
<i class="fa fa-pie-chart" aria-hidden="true"></i> Statistics</button>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="row" style="margin-top: 50px;">
<div>
<h5>Instruction</h5>
</div>
</div>
<hr>
<!--Instructions Boxes-->
<div class="row topMargin">
<div class="col-md box1">
<div class="col-md-12">
<i class="fa fa-upload fa-3x " style="padding-bottom: 10px;" aria-hidden="true"></i>
</div>
<div class="col-md-12">
<h5>Choose your text file</h5>
<hr>
<p>Maximum 5 MB.</p>
</div>
</div>
<div class="col-md box2">
<div class="col-md-12">
<i class="fa fa-file-text fa-3x " style="padding-bottom: 10px;" aria-hidden="true"></i>
</div>
<div class="col-md-12">
<h5>Press "Enhanced Text"</h5>
<hr>
<p>to read your text in frequency-based color coded system.</p>
</div>
</div>
<div class="col-md box3">
<div class="col-md-12">
<i class="fa fa-pie-chart fa-3x " style="padding-bottom: 10px;" aria-hidden="true"></i>
</div>
<div class="col-md-12">
<h5>Press "Statistics"</h5>
<hr>
<p>to see if the text is suitable for you and view a detailed analysis of the text.</p>
</div>
</div>
</div>
</div>